<template>
  <div class="z-form-item">
    <div class="form-control">
      <label class="label">
        <span class="label-text">{{ label }}</span>
      </label>
      <div class="flex items-center">
        <slot />
      </div>
      <div class="my-2 text-error">{{ errors?.[name] }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { FormErrors } from "vee-validate";

interface Props {
  name: string;
  label?: string;
  errors?: FormErrors<any>;
}
defineProps<Props>();
</script>
